import { CloseOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { useRef } from "react";
import ReactDOM from "react-dom";
import styles from './index.module.sass';


/**弹出窗口扩展选项 */
export interface Option {
    /**窗口大小 */
    size?: 'default' | 'middle' | 'small' | 'mini' | 'auto'

    /**弹出窗口类名 */
    className?: string

    /**是否遮罩 */
    isNotMask?: boolean

    /**样式 */
    contentStyle?: any

    /**是否使用小头部 */
    isLittleHeader?: boolean
}

interface Props extends Option {
    /**关闭弹出窗口 */
    onClose: Function

    /**提供回调给popup函数 */
    onCallBack: Function

    /**弹出窗口标题 */
    title?: string
}

/**本组件的使用需要先在app.tsx中定义附属节点，约定id是popup-root */
const Popup: React.FC<Props> = ({
    onClose,
    onCallBack,
    children,
    title,
    size = 'default',
    className,
    isNotMask,
    contentStyle,
    isLittleHeader
}) => {
    console.debug('Popup', title);

    const wrapperRef = useRef(null);
    const contentRef = useRef(null);

    function handleClose() {
        if (wrapperRef && contentRef) {
            const transformStr = size === 'auto' ? 'translate(-50%, -50%)' : '';
            const wrapperEle: any = wrapperRef.current;
            const contentEle: any = contentRef.current;
            let opacityVal = 1;
            let scaleVal = 1;
            const closeAnim = () => {
                wrapperEle.style.opacity = opacityVal;
                contentEle.style.transform = `${transformStr} scale(${scaleVal}, ${scaleVal})`;
                opacityVal -= 0.1;
                scaleVal -= 0.005;
                if (opacityVal > 0) {
                    requestAnimationFrame(closeAnim);
                } else {
                    onClose();
                }
            }
            requestAnimationFrame(closeAnim);
        } else {
            onClose();
        }
    }

    onCallBack({
        handleAnimationClose: handleClose
    })

    const popupRoot = document.getElementById('popup-root');

    let contentClassName: any;
    switch (size) {
        case 'middle':
            contentClassName = styles.contentMiddle;
            break;
        case 'small':
            contentClassName = styles.contentSmall;
            break;
        case 'mini':
            contentClassName = styles.contentMini;
            break;
        case 'auto':
            contentClassName = styles.contentAuto;
            break;
        default:
            contentClassName = styles.contentDefault;
            break;
    }

    if (className) {
        contentClassName += ` ${className}`;
    }

    if (popupRoot) {
        return ReactDOM.createPortal(
            <div className={isNotMask ? styles.wrapperNotMask : styles.wrapper} ref={wrapperRef} onClick={handleClose}>
                <article className={contentClassName} style={contentStyle} ref={contentRef} onClick={evt => evt.stopPropagation()}>
                    <header className={isLittleHeader ? styles.littleHeader : styles.header}>
                        <div className={styles.title}>
                            {title || ''}
                        </div>
                        <Button className={styles.closeButton} type='text' icon={<CloseOutlined />} onClick={handleClose} />
                    </header>
                    <section className={styles.body}>
                        {children}
                    </section>
                </article>
            </div>,
            popupRoot
        );
    } else {
        console.error('弹出窗口组件无法找到附属节点，id是popup-root')
        return null;
    }


}

export default Popup;